<!-- html -->
<template>
  <h2 class="h2">具名插槽</h2>
  <span class="span3">新闻</span>
  <br>
  <slotTest2Child v-slot:title>
    <span class="span3">国际</span>
  </slotTest2Child>
  <slotTest2Child v-slot:content>
    <li class="li1" v-for="item in news1">{{ item }}</li>
  </slotTest2Child>
  <hr class="hr1">
  <slotTest2Child v-slot:title>
    <span class="span3">体育</span>
  </slotTest2Child>
  <slotTest2Child v-slot:content>
    <li class="li1" v-for="item in news2">{{ item }}</li>
  </slotTest2Child>
  <hr class="hr1">
  <slotTest2Child v-slot:title>
    <span class="span3">娱乐</span>
  </slotTest2Child>
  <slotTest2Child v-slot:content>
    <li class="li1" v-for="item in news3">{{ item }}</li>
  </slotTest2Child>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'slotTest2'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import slotTest2Child from '@/components/slot/SlotTest2Child.vue'

//数据
let news1 = ['国际新闻1', '国际新闻2', '国际新闻3']
let news2 = ['体育新闻1', '体育新闻2', '体育新闻3']
let news3 = ['娱乐新闻1', '娱乐新闻2', '娱乐新闻3']
</script>

<!-- 样式 -->
<style scoped></style>